<template>
  <div>
    <header>
      <!-- <div style="height:150px; width:100%;"></div> -->

      <div class="headerTop">
        <div class="headePhoto" v-if="userInfo1"><img :src="userInfo1.avatar"  @click="changeHeadImgEvent"/></div> 
        <div class="headePhoto" v-else><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607415491649&di=54331ff5df173b749bc19f0c93f1c25b&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F01%2F48%2F88%2F16574444edb24ea.jpg"  /></div> 

        <label >
        <input type="file" id="File" @change="changeHeadImg" style="display:none;" ref="headImg" accept="image/*">  
</label>  
         <div class="myname" v-if="!userInfo1">
          <h3><van-icon name="user-circle-o" /> 您还没有登录</h3>
          <h4><van-icon name="free-postage" /></h4>
          {{ userInfo2 }}
        </div>
        <div class="myname" v-else>
          <h3><van-icon name="user-circle-o" /> {{ userInfo1.userName }}</h3>
          <h3><van-icon name="free-postage" />{{ userInfo1.email }}</h3>
        </div>
      </div>
      <div class="record">
        <router-link to="/MyCollect" tag="div"><p>我的收藏</p></router-link>

        <p>我的评论</p>
      </div>
    </header>
    <div class="btns">
      <div style="width: 100%" v-if="!userInfo1">
        <van-button type="primary" to="/Logining" size="large">登陆</van-button>
        <div style="height: 10px"></div>
        <van-button type="primary" to="/Register" size="large">注册</van-button>
      </div>


      <div style="width: 100%" v-else>
        <van-button
          type="primary"
          size="large"
          @click="viewUser"
          class="viewUserInfo"
          >查看个人信息</van-button
        >
        <ViewPersonalInfo
          :userInfo="userInfo2"
          v-if="isShow"
        ></ViewPersonalInfo>

        <van-button
          type="primary"
          size="large"
          class="viewUserInfo"
          @click="modifyUserInfoIsShow = !modifyUserInfoIsShow ;isShow=false"
          >修改个人信息</van-button
        >
        <ModifyUserInfo v-if="modifyUserInfoIsShow"></ModifyUserInfo>

        <van-button type="primary" to="" size="large" @click="exitLogin"
          >退出登录</van-button
        >
      </div>
    </div>
    <!-- <div class="nullBox"></div> -->
  </div>
</template>

<script>
import ViewPersonalInfo from "./components/ViewPersonalInfo.vue";
import ModifyUserInfo from "./components/ModifyUserInfo.vue";
import { Toast } from 'vant';
import { getPersonalInformation } from "@/api/myLogin.api.js";
import { getExitLogin ,getModifyAvatar} from "@/api/myLogin.api.js";
import {mapState} from "vuex";

export default {
  name: "LoginPage",
  data() {
    return {
      
      userInfo2: null,
      isShow: false,
      modifyUserInfoIsShow: false,
    };
  },
  created() {
    getPersonalInformation().then((res) => {
      this.userInfo2 = res.data;
      console.log(res);
    });
  },
  computed: {
    ...mapState(["userInfo1",]),
  },
  components: {
    ViewPersonalInfo,
    ModifyUserInfo,
  },
  methods: {
    viewUser() {
      if (this.userInfo2 != null) {
        // console.log(1);
        this.isShow = !this.isShow;
        this.modifyUserInfoIsShow=false
      }
    },
    exitLogin() {
      getExitLogin().then(() => {
          //  console.log(res)
          Toast.success("退出登录成功");

           this.$store.commit("changeIsLogin", {isLogin:false})
           this.$store.commit("modifyUserInfo",{userName:null})
          this.$router.push("/")
      });
    },
    // 点击头像图片进行切换
    changeHeadImgEvent(){
        this.$refs.headImg.click()
    },
    // input框提交文件
    changeHeadImg(e){
      // alert("1")   
      console.log(1)
        getModifyAvatar(e.target.files[0]).then((res) => {
          console.log(res)
      // alert("2")        

      });
      // 换取头像后,获取信息刷新数据
      getPersonalInformation().then(res=>{
        console.log(res)
        this.$store.commit('modifyUserInfo',{userInfo1:res.data})
        this.headPhoto=res.data.avatar
          if(res.code==0){
              Toast.success('更换成功');
            }
      })
    },

    
  },
};
</script>

<style lang="less" scoped>
header {
  .headerTop {
    height: 150px;
    padding: 10px;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .headePhoto {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .myname {
      color: brown;
      padding-left: 10px;
    }
  }
  .record {
    display: flex;
    justify-content: space-around;
    align-items: center;
    p {
      width: auto;
    }
  }
}
.btns {
  padding-top: 4px;
  height: 160px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  //background-color: burlywood;
}
.nullBox {
  // padding: 500px;
  height: 500px;
  width: 100%;
}
.viewUserInfo {
  margin-bottom: 3px;
}
/deep/.van-button--primary {
    color: #fff;
    background-color: #e72c42;
     border: 1px solid #bbb1b3;
}
</style>